<template>
  <div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="140px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="审批单号：" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.sn" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人：" style="margin-bottom: 0px;">
            <CheckUserInfo v-if="baseInfo.creator" :label="baseInfo.creator" :user-id="baseInfo.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：" style="margin-bottom: 0px;">
            <ToolTip :content="format(baseInfo.createDate,'YYYY/MM/DD HH:mm:ss')" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请部门：" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.proposerDepartment" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人：" style="margin-bottom: 0px;">
            <CheckUserInfo v-if="baseInfo.proposerName" :label="baseInfo.proposerName" :user-id="baseInfo.proposer" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总外采额度(元)：" style="margin-bottom: 0px;">
            <el-tooltip :open-delay="800" placement="top-start">
              <div slot="content" style="max-width:200px;">
                {{ baseInfo.allAmount | moneyFilter(true, '', true) }}
              </div>
              <div>{{ baseInfo.allAmount | bigDataFilter(true, '', true, 2) }}</div>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="剩余外采额度(元)：" style="margin-bottom: 0px;">
            <el-tooltip :open-delay="800" placement="top-start">
              <div slot="content" style="max-width:200px;">
                {{ baseInfo.remainingAmount | moneyFilter(true, '', true) }}
              </div>
              <div>{{ baseInfo.remainingAmount | bigDataFilter(true, '', true, 2) }}</div>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请外采额度(元)：" style="margin-bottom: 0px;">
            <el-tooltip :open-delay="800" placement="top-start">
              <div slot="content" style="max-width:200px;">
                {{ baseInfo.applicationAmount | moneyFilter(true, '', true) }}
              </div>
              <div>{{ baseInfo.applicationAmount | bigDataFilter(true, '', true, 2) }}</div>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请说明：" style="margin-bottom: 0px;">
            <div class="flex-center">
              <ToolTip :content="baseInfo.description" placement="top-start"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授权人：" style="margin-bottom: 0px;">
            <template v-if="!editAuthUser">
              <CheckUserInfo v-if="baseInfo.authUser" :label="baseInfo.authUser" :user-id="baseInfo.authUserId" />
              <div v-else>--</div>
            </template>
            <selectWithUserLoad
              v-else
              ref="authUserRef"
              v-model="computedValue"
              :default-list="baseInfo.authUserId && baseInfo.authUser?[{id: baseInfo.authUserId, userName: baseInfo.authUser}] : []"
              :multiple="false"
              :show-check-user="true"
              key-name="id"
              class="width240"
              label-name="userName"
              filterable
              @change="proposerChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="indentation-form-item">
          <el-form-item label="授权人可授权额度(元)：" style="margin-bottom: 0px;">
            <el-tooltip :open-delay="800" placement="top-start">
              <div slot="content" style="max-width:200px;">
                {{ baseInfo.authAmount | moneyFilter(true, '', true) }}
              </div>
              <div>{{ baseInfo.authAmount | bigDataFilter(true, '', true, 2) }}</div>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：" style="margin-bottom: 0px;">
            <FileShowList v-if="baseInfo.attachment && baseInfo.attachment.length" :file-list="baseInfo.attachment" style="max-width:100%;"/>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { format } from '@/filters/date';
import FileShowList from '@/components/CreateOrder/fileShowList';
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { mapState } from 'vuex';
import { moneyFilter, bigDataFilter } from '@/filters/number';
import { externalHarvestDetailEdit } from '@/api/externalHarvest';
export default {
  filters: {
    moneyFilter, bigDataFilter
  },
  components: {
    FileShowList,
    SelectWithUserLoad
  },
  props: {
    baseInfo: {// 详情信息
      type: Object,
      default: () => {
      }
    },
    id: {
      type: Number,
      default: null
    },
    isExamine: {// 是否当前审批人
      type: Boolean,
      default: false
    },
    isCurrentVersion: {// 是否当前版本
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      format,
      authUserId: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    editAuthUser() { // 当前审批人且开始修改授权人事件且为当前版本
      return this.isExamine && this.isCurrentVersion && this.baseInfo.authUserEdit;
    },
    computedValue: {
      get() {
        return this.baseInfo.authUserId;
      },
      set(newVal) {
        this.authUserId = newVal;
      }
    }
  },
  methods: {
    proposerChange() {
      externalHarvestDetailEdit({ id: this.id, authUserId: this.authUserId }).then(res => {
        if (res.code === 200) {
          this.$emit('freshDetail');
        }
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-form {
  & ::v-deep {
    .el-form-item {
      .el-form-item__label {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999 !important;
        opacity: 1;
        line-height: 30px;
      }
    }
    .el-form-item__content {
      font-size: 14px;
      font-family: PingFang SC;
      line-height: 30px;
      font-weight: 400;
      color: #333333;
      opacity: 1;
    }
  }
}
.inline{
  display: inline;
}
.width240 {
  width: 240px;
  ::v-deep .el-select {
    width: 240px;
  }
}
.mobile-el-form {
  .width240 {
    width: 100%;
    ::v-deep .el-select {
      width: 100%;
    }
  }
}
.dividing{
  &::v-deep {
    .el-col {
      .el-form-item__content {
        border-right: 1px solid #EBEEFD;
      }
      &:nth-child(2n) {
        .el-form-item__content {
          border-right: none;
        }
      }
      &:last-child {
        .el-form-item__content {
          border-right: none;
        }
      }
    }
  }
}
.indentation-form-item {
  ::v-deep .el-form-item {
    label {
      line-height: 1.2 !important;
    }
  }
}
</style>
